<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Archidentity</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<!--
        <script type="text/javascript" src="js/jquery-1.4.1-vsdoc.js"></script>                    
        <script type="text/javascript" src="js/jquery.pageFlipper.js"></script>        
        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
-->
        <script type="text/javascript" src="js/jmorph.js"></script>
        <script type="text/javascript" src="js/archid.js"></script>
        <script type="text/javascript" src="js/html5.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
        <link href="css/morphing.css" rel="stylesheet" media="screen" type="text/css" />
        <link href="css/pageFlipper.css" rel="stylesheet" media="screen" type="text/css" />
    </head>


    <body>

        <!--warpper-->
        <div id="wrapper">

            <!--header-->
            <div id="header">
                
                <div><a href="#home" title="archidentity - logo" class="logo"></a></div>
                <div id="nav">
                    <ul>
                        <li><a href="#project">PROJECTS</a>/</li>
                        <li><a href="#whowe">COMPANY PROFILE</a>/</li>
                        <li><a href="#people">PEOPLE</a>/</li>
                        <li><a href="#contact">CONTACT US</a></li>
                    </ul>
                </div>

                <div id="flag">
                    <div class="usa"></div>
                    <div class="japan"></div>
                    <div class="arbe"></div>
                </div>
            </div>
            <!--header end-->
            <!--start article -->
            <article>
                <section id="home" class="home">
                    <!--banner-->
                    <!--<div id="fls-ban">
                    </div> -->
                    <div class="jmorph">
                        <div class="imageContainer">
                            <div class="image">
                                <div class="currentImg" style="height: 350px; width: 656px;">
                                    <div class="nextImg"></div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div><a href="#previous" class="previous"><img src="images/project/btn-lft.jpg" alt="" /></a></div>
                            <div class="bandContainer">
                                <ul class="band">
                                    <li><a href="images/project/1.jpg"><img src="images/project/1.jpg" width="172px" height="106px" /></a></li>
                                    <li><a href="images/project/2.jpg"><img src="images/project/2.jpg" width="172px" height="106px" /></a></li>
                                    <li><a href="images/project/3.jpg"><img src="images/project/3.jpg" width="172px" height="106px" /></a></li>
                                    <li><a href="images/project/4.jpg"><img src="images/project/4.jpg" width="172px" height="106px" /> </a></li>
                                </ul>
                            </div>
                            <div><a href="#next" class="next"><img src="images/project/btn-rgt.jpg" alt="" /></a></div>
                        </div>
                    </div>
                    
                    <!--banner end-->
                    <!--<div class="bor-btm"></div>-->
                    <!--content-->
                    <div id="content">
                        <div class="blog">
                            <div class="marg-lft"><h1>Welcome Message</h1></div>
                            <div class="wel-sms"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's to mak.</p></div>
                            <div class="icon"></div>
                        </div>
                        <div class="blog">
                            <div class="marg-lft"><h1>Recent Deelopments</h1></div>
                            <div class="wel-sms"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's to mak.</p></div>
                            <div class="icon1"></div>
                        </div>
                        <div class="blog">
                            <div class="marg-lft"><h1>Contact Us</h1></div>
                            <div class="wel-sms"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's to mak.</p></div>
                            <div class="icon2"></div>
                        </div>
                    </div>
                    <!--<div class="bor-btm"></div>-->
                    <!--content end-->
                </section>
                <section id="whowe" class="whowe">
                    <div style="width:230px; margin:110px 0 0 190px; color:#fff; float:left;">
                        <div><h2>Who we are</h2></div>
                        <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's to mak.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's to mak.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's to mak.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
 						
                   </div>
                   <div><a href="#" target="_self" class="more-btn"></a></div>
                   <div><img src="images/pro-ban.jpg" alt="" class="padd-tp" /></div>
                </section>
                <section id="people" class="people">
                    <div> <!--
                    <ul id="lstImages" class="imagesSource">
                        <li><img alt="BMW" src="images/project/1.jpg" /></li>
                        <li><img alt="BMW" src="images/project/2.jpg" /></li>
                        <li><img alt="BMW" src="images/project/3.jpg" /></li>
                        <li><img alt="BMW" src="images/project/4.jpg" /></li>
                    </ul> 
                          -->
                    </div>
                </section>
                <section id="project">
                   <div style="width:230px; margin:10px 0 0 200px; color:#fff; float:left;">
                        <div><h2>HOUSE-KW</h2></div>
                        <div><p>Project Year: 2010
                        <br />Location: Oud Al Muteena Second
                        <br />Plot Area: 15,096 sq.ft.
                        <br />BUA (Built Up Area): 8,000 sq.ft.</p></div>
                   </div>
                   <!--product bann-->
                   <div><img src="images/project-ban.png" class="project-ban" alt="" /></div>
                   <!--product bann end-->
                   <div class="theconcept"><p style="line-height:15px;">The concept for KW House is that of a transparent open courtyard flanked by outdoor seating decks and seamless views into the house. This concept was reflected throughout the design by multiple elements such as a large puncture into the main entry establishing a visual axis between the interior and exterior spaces. Additionally a semi-enclosed double story balcony has been introduced overlooking the main entry allowing for shaded outdoor seating areas while maintaining privacy for the family. The "U" shaped villa maximizes the view of the pool within the courtyard which is overlooked by the main living spaces and outdoor terraces. Details such as cantilevered slabs and large glass frames have been incorporated to enhance the concept of transparency while filtering the direct sunlight. Natural materials have been used such as limestone, wood, white washed stucco walls to bestow the house with an natural earthy feel.</p></div>                  
                </section>               
                <section id="about" class="about">
                    about
                </section>
            <article>
            <!--start article -->
        </div>
        <!--warpper end-->
        <script>
            $(".jmorph").jmorphGallery();
        </script>
        <script type="text/javascript">
            $(function() {
                $('#nav a').bind('click',function(event){
                    var $anchor = $(this);

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 3000,'easeInOutExpo');
                    event.preventDefault();
                });
            });
            $(function() {
                $('.logo').bind('click',function(event){
                    var $anchor = $(this);

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 3000,'easeInOutExpo');
                    event.preventDefault();
                });
            });
            $(function() {
                $('.smooth').bind('click',function(event){
                    var $anchor = $(this);

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 3000,'easeInOutExpo');

                    event.preventDefault();
                });
            });

                 //       var isIPad = navigator.userAgent.indexOf('iPad') >= 0;
//
  //                          $('#lstImages').pageFlipper({
    //                            fps: isIPad ? 10 : 10,
      //                          easing: isIPad ? 0.1 : 0.2,
      //                          backgroundColor: '#aaaaaa'
        //                    });
//
  //                          $('.canvasHolder').css('left', (isIPad ? 0 : 130) + 'px');
    //                        $('#mouse').css({
      //                          width: (isIPad ? 40 : 20) + 'px',
        //                        height: (isIPad ? 40 : 20) + 'px',
          //                      '-moz-border-radius': (isIPad ? 20 : 10) + 'px',
            //                    '-webkit-border-radius': (isIPad ? 20 : 10) + 'px'
              //              });
        </script>        
    </body>
</html>
